<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <template v-if="this.$route.query.id != undefined">
          <!-- 面包屑 -->
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item>学科管理</el-breadcrumb-item>
            <el-breadcrumb-item>
              <template>
                {{ this.$route.query.name }}
              </template>
            </el-breadcrumb-item>
            <el-breadcrumb-item>目录管理</el-breadcrumb-item>
          </el-breadcrumb>
          <!-- 分割线 -->
          <el-divider></el-divider>
        </template>

        <el-form
          :inline="true"
          :model="formInline"
          class="demo-form-inline"
          ref="qc"
          style="width: 100vm"
        >
          <!-- 目录名称搜索 -->
          <el-form-item label="目录名称" prop="user">
            <el-input
              v-model="formInline.user"
              placeholder="输入搜索内容"
            ></el-input>
          </el-form-item>
          <!-- 状态搜索 -->
          <el-form-item label="状态" style="margin-left: 30px" prop="region">
            <el-select v-model="formInline.region" placeholder="请选择">
              <el-option label="启用" value="启用"></el-option>
              <el-option label="禁用" value="禁用"></el-option>
            </el-select>
          </el-form-item>
          <!-- 清除按钮 -->
          <el-form-item>
            <el-button @click="qingchu">清除</el-button>
            <!-- 搜索按钮 -->
            <el-button
              type="primary"
              @click="sousuo"
              style="margin-right: 270px"
              >搜索</el-button
            >
            <div class="right">
              <el-button
                type="text"
                @click="tiaozhuan"
                title="返回学科"
                class="back"
                v-if="this.$route.query.id != undefined"
              >
                <i class="el-icon-back"></i>
                返回学科
              </el-button>
              <el-button
                type="success"
                icon="el-icon-edit"
                style="float: right"
                @click="tanchuang"
                >新增目录</el-button
              >
            </div>
          </el-form-item>
        </el-form>
        <!-- 一共有多少信息 -->
        <el-alert
          :title="'消息一共' + counts + '条'"
          type="info"
          show-icon
          :closable="false"
        >
        </el-alert>

        <el-table :data="items" style="width: 100%; margin-top: 12px">
          <el-table-column
            label="序号"
            width="90px"
            prop="creatorID"
            type="index"
            :index="indexMethod"
          >
          </el-table-column>
          <el-table-column label="所属学科" width="150px" prop="subjectName">
          </el-table-column>

          <el-table-column label="目录名称" width="190px" prop="directoryName">
          </el-table-column>

          <el-table-column label="创建者" width="190px" prop="username">
          </el-table-column>

          <el-table-column label="创建日期" width="190px" prop="addDate">
            <template #default="{ row }">
              {{ shijianfangfa(row.addDate) }}
            </template>
          </el-table-column>

          <el-table-column label="面试题数量" width="140px" prop="totals">
          </el-table-column>

          <el-table-column label="状态" width="150px" prop="state">
            <template #default="{ row }">
              {{ row.state === 1 ? "启用" : "禁用" }}
            </template>
          </el-table-column>

          <el-table-column label="操作" width="150px">
            <template width="100%" #default="{ row }">
              <el-button type="text" width="100%" @click="jinyong(row)">{{
                row.state === 1 ? "禁用" : "启用"
              }}</el-button>
              <el-button
                type="text"
                width="100%"
                @click="xiugai(row)"
                :disabled="row.state === 1"
                >修改</el-button
              >
              <el-button
                type="text"
                width="100%"
                @click="open(row.id)"
                :disabled="row.state === 1"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- style="margin-top: 15px; margin-left: 530px" -->
        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="page"
          :page-sizes="[10, 15, 20, 30]"
          :page-size="pagesize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="counts"
          style="margin-top: 15px; margin-left: 59%"
        >
        </el-pagination>
      </el-card>

      <directorysadd
        :dialogFormVisible.sync="dialogFormVisible"
        ref="xiu"
      ></directorysadd>
    </div>
  </div>
</template>

<script>
// import { list as getCompanys } from '@/api/hmmm/companys'
// import { list as getQuestion } from '@/api/hmmm/questions'
import { list, remove, changeState } from '@/api/hmmm/directorys'
import dayjs from 'dayjs'
import directorysadd from '@/module-hmmm/components/directorys-add.vue'

export default {
  // 注册局部组件
  components: {
    directorysadd
  },
  created () {
    this.xuanran()
  },

  data () {
    return {
      formInline: {
        user: '',
        region: ''
      },
      form: {},
      obj: {
        directoryName: '',
        state: ''
      },
      // 渲染一共多少条信息
      counts: 0,
      // 渲染返回信息存储
      items: [],
      // 分页当前页
      page: 1,
      // 分页在前几页
      pagesize: 10,
      // 弹窗控制
      dialogFormVisible: false,
      id: '',
      name: ''
    }
  },

  methods: {
    // 跳转
    tiaozhuan () {
      console.log(1)
      this.$router.push('./list')
    },
    // 搜索
    async sousuo () {
      // console.log(this.obj.state)
      // this.formInline.region = ''
      if (this.formInline.region === '禁用') {
        this.formInline.region = 0
      }
      if (this.formInline.region === '启用') {
        this.formInline.region = 1
      }
      console.log(this.formInline.region)
      const { data } = await list({
        directoryName: this.formInline.user,
        state: this.formInline.region
      })
      // console.log(data.items)
      this.items = data.items
      // console.log(this.items[0])
      // 第一种 判断this.items数组中的state 是否为0 为0则重新渲染页面
      // this.items.forEach(item => {
      //   if (item.state === 0) {
      //     this.xuanran()
      //   }
      // })
      // 第二种判断表格是否为空 为空则重新渲染列表
      if (this.formInline.region === '' && this.formInline.user === '') {
        this.xuanran()
      }
      this.counts = data.items.length

      this.$refs.qc.resetFields()
      // this.formInline.region = ''
    },
    // 搜索框清除
    qingchu () {
      this.$refs.qc.resetFields()
    },
    // 禁用启动
    async jinyong (row) {
      // console.log(row)
      await changeState({ id: row.id, state: row.state === 1 ? 0 : 1 })

      this.$message.success('操作成功')

      row.state = row.state === 1 ? 0 : 1
    },
    // 修改回显
    async xiugai (row) {
      this.dialogFormVisible = true
      // console.log(row)
      this.form = row

      this.$refs.xiu.huixian(row)
    },
    // 新增弹窗
    tanchuang () {
      this.dialogFormVisible = true
    },
    // 删除操作
    open (id) {
      // console.log(id)
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {})
        .then(async () => {
          // console.log(id)
          await remove({ id })
          // 删除成功弹窗
          this.$message.success('删除成功')
          // 判断删除后页码变化
          if (this.items.length === 1 && this.page > 1) {
            this.page--
          }
          this.xuanran()
        })
        .catch(() => {})
    },

    // 时间格式
    shijianfangfa (time) {
      return dayjs(time).format('YYYY-MM-DD HH:mm:ss')
    },
    // 累加序号
    indexMethod (index) {
      return (this.page - 1) * this.pagesize + index + 1
    },
    // 页容量变化时
    handleSizeChange (val) {
      this.pagesize = val
      this.page = 1
      this.xuanran()
    },
    // 页码变化时
    handleCurrentChange (val) {
      this.page = val
      this.xuanran()
    },
    /**
     * 渲染数据
     */
    async xuanran () {
      this.id = this.$route.query.id
      if (this.id) {
        const { data } = await list({ page: this.page, pagesize: this.pagesize, subjectID: this.id })
        this.counts = data.counts
        this.items = data.items
      } else {
        const { data } = await list({ page: this.page, pagesize: this.pagesize })
        // console.log(data)
        this.counts = data.counts
        this.items = data.items
      }
    }
  }
}
</script>

<style scoped>
.right {
  float: right;
}
.back {
  color: #409eff;
  display: inline-block;
  line-height: 20px;
  /* padding-bottom: 50px; */
  text-align: center;

  /* align-items: center; */
}
</style>
